<script lang='ts' setup>

import { onMounted, reactive } from 'vue'
import { trilium_get_config, TriliumConfig } from '@/apis/application/trilium/trilium_get_config.ts'
import { Api } from '@/apis/structs.ts'
import { trilium_set_config } from '@/apis/application/trilium/trilium_set_config.ts'

const emits = defineEmits(['update:show', 'success'])
const props = defineProps({
  show: { required: true, type: Boolean }
})

const state = reactive<{ loading: boolean, config: TriliumConfig, saving: boolean }>({ loading: true, config: { listen: '127.0.0.1', port: 8602 }, saving: false })

onMounted(async () => {
  state.loading = true
  state.config.listen = "127.0.0.1"
  state.config.port = 8602

  trilium_get_config().then(async (response: Api<TriliumConfig>) => {
    state.loading = false
    if (0 !== response.code) {
      window.$message.error(response.message)

      return
    }

    state.config.listen = response.data.listen
    state.config.port = response.data.port
  })
})

async function close(): Promise<void> {
  emits('update:show', false)
}

async function save(): Promise<void> {
  if ('' === state.config.listen.trim()) {
    window.$message.error('本地监听地址不能为空')

    return
  }

  state.saving = true
  const response = await trilium_set_config(state.config.listen, state.config.port)
  state.saving = false

  if (0 !== response.code) {
    window.$message.error(response.message)

    return
  }

  window.$message.success("保存成功，重启应用后生效")
}
</script>

<template>

  <n-modal :closable='false' :close-on-esc='false' :mask-closable='false' :show='props.show' class='trilium-configuration-modal' transform-origin='center'>
    <n-card>
      <n-space vertical>
        <n-divider>基础配置</n-divider>
        <template v-if='state.loading'>
          <n-space :wrap-item='false' align='center'>
            <div class='width-05'>
              <n-skeleton height='25px' width='100%' />
            </div>
            <div class='flex-max'>
              <n-skeleton height='25px' width='100%' />
            </div>
          </n-space>
        </template>
        <template v-else>
          <n-space :wrap-item='false' align='center'>
            <div class='width-05'>
              <n-input-group>
                <n-input-group-label size='small'>监听地址</n-input-group-label>
                <n-input v-model:value='state.config.listen' placeholder='监听的本地地址' size='small' />
              </n-input-group>
            </div>
            <div class='flex-max'>
              <n-input-group>
                <n-input-group-label size='small'>端口</n-input-group-label>
                <n-input-number v-model:value='state.config.port' max='65535' min='1' placeholder='监听的端口' size='small' />
              </n-input-group>
            </div>
          </n-space>
        </template>
        <div>
          <n-space align='center' justify='center'>
            <n-button size='small' type='error' @click='close'>取消</n-button>
            <n-button :loading='state.saving' size='small' type='primary' @click='save'>保存</n-button>
          </n-space>
        </div>
      </n-space>
    </n-card>
  </n-modal>
</template>

<style scoped>
.trilium-configuration-modal {
  width: 85vw;
  height: 800px;
}
</style>
